<!--
 * @Author: Charsen
 * @Date: 2025-08-01 20:06
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-28 14:34:21
 * @Description: 
-->
<template>
  <TableWrapper
    :left-span="leftSpan"
    :columns="columns"
    :list="list"
    :actions="actions"
    :loading="false"
    :multi-select="false"
    :table-index="true"
    @on-show="showShower"
    @on-edit="showEditor"
    @on-edit-page="goEditPage"
    @on-del="handleDelete"
  >
    <template #left>
      <slot name="left"></slot>
    </template>

    <template #header-options>
      <slot name="header-options"></slot>
    </template>

    <!-- 传递所有插槽 -->
    <template v-for="(_, name) in $slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData"></slot>
    </template>
  </TableWrapper>

  <Editor
    v-model:visible="editDialog.visible"
    :entity-id="editDialog.id"
    :entity="entity"
    :form-size="formSize"
    :request-url="requestUrl"
    @on-updated="handleUpdate"
  />

  <Shower
    v-model:visible="showDialog.visible"
    :entity-id="showDialog.id"
    :entity="entity"
    :form-size="formSize"
    :request-url="requestUrl"
  >
    <template v-for="(_, name) in $slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData"></slot>
    </template>
  </Shower>
</template>

<script setup lang="ts">
  import { useDestroy } from '#/hooks/useDestroy'
  import { useEditor } from '#/hooks/useEditor'
  import { useLister } from '#/hooks/useLister'
  import { useShower } from '#/hooks/useShower'
  import { useVModel } from '@vueuse/core'

  defineOptions({
    name: 'ScaffoldTable',
  })

  const props = withDefaults(
    defineProps<{
      actions: AclPermission
      columns: any[]
      createSinglePage?: boolean
      entity: string
      formSize?: string
      leftSpan?: number
      list: any[]
      queryParams?: object
      requestUrl?: RequestUrl
    }>(),
    {
      actions: () => ({
        add: '',
        edit: '',
        del: '',
        delBatch: '',
        trashed: '',
      }),
      requestUrl: () => ({}),
      queryParams: () => ({}),
      createSinglePage: false,
      leftSpan: 0,
      formSize: 'small',
    }
  )

  const emits = defineEmits<{
    (e: 'on-deleted'): void
    (e: 'on-updated', res: object): void
    (e: 'update:list', res: object): void
  }>()

  const hookOptions = { entity: props.entity, formSize: props.formSize, url: props.requestUrl }

  const listData = useVModel(props, 'list', emits)
  const { showDialog, showShower } = useShower(hookOptions)

  const { editDialog, showEditor } = useEditor(hookOptions)

  const { handleDestroy } = useDestroy({ entity: props.entity, list: listData })

  const { goEditPage, updateListWithOne } = useLister(hookOptions)

  const handleDelete = (id: number | string): void => {
    handleDestroy(id, () => emits('on-deleted'))
  }

  const handleUpdate = (data: object) => {
    updateListWithOne(data, editDialog.value.index)
    emits('on-updated', data)
  }

  // rightSpan 和 tableStyle 计算已移至 ScaffoldTableWrapper 组件
</script>
